From e5d34372c4f163e49fb1e0a95f53445f6fa13f2c Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Thu, 4 Sep 2014 19:18:13 +0200 Subject: [PATCH] Adwaita: in app-notification padding Adwaita now adds the `right` padding to the app notification, so it shouldn't be set in the code via margins or whatever. --- gtk/resources/theme/Adwaita/_common.scss | 5 +- .../theme/Adwaita/gtk-contained-dark.css | 89 +++++++++++++++---- gtk/resources/theme/Adwaita/gtk-contained.css | 89 +++++++++++++++---- 3 files changed, 151 insertions(+), 32 deletions(-) diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss index f6880d6dc8..6595f1edd4 100644 --- a/gtk/resources/theme/Adwaita/_common.scss +++ b/gtk/resources/theme/Adwaita/_common.scss @@ -2269,8 +2269,10 @@ GtkScrolledWindow { * App Notifications * *********************/ -.app-notification { +.app-notification, +.app-notification.frame { @extend %osd; + padding: 10px; border-width: 0 1px 1px; border-style: solid; border-color: $osd_outer_borders_color; @@ -2279,7 +2281,6 @@ GtkScrolledWindow { background-image: linear-gradient(to bottom, transparentize(black, 0.8), transparent 2px); background-clip: padding-box; - padding: 0 4px; &:backdrop { background-image: none; } .button { border: 1px solid; diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index e6a592b22d..d19195ed48 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -123,7 +123,8 @@ GtkFlowBox .grid-child { GtkFlowBox .grid-child:selected { outline-offset: -2px; } -.app-notification, .osd { +.app-notification, +.app-notification.frame, .osd { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); text-shadow: 0 1px black; @@ -997,7 +998,9 @@ GtkCalendar.header .inline-toolbar GtkToolButton:backdrop:only-child > .button.t .menuitem.button.flat, .header-bar .menuitem.titlebutton.button, .titlebar .menuitem.titlebutton.button, -GtkCalendar.header .menuitem.titlebutton.button, .menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, .header-bar .menuitem.titlebutton.button:backdrop:hover, +GtkCalendar.header .menuitem.titlebutton.button, .menuitem.button.flat:backdrop, .header-bar .menuitem.titlebutton.button:backdrop, +.titlebar .menuitem.titlebutton.button:backdrop, +GtkCalendar.header .menuitem.titlebutton.button:backdrop, .menuitem.button.flat:backdrop:hover, .header-bar .menuitem.titlebutton.button:backdrop:hover, .titlebar .menuitem.titlebutton.button:backdrop:hover, GtkCalendar.header .menuitem.titlebutton.button:backdrop:hover, .button:link, .header-bar .button.titlebutton:link, .titlebar .button.titlebutton:link, @@ -1013,13 +1016,51 @@ GtkCalendar.header .list-row.button.titlebutton, .list-row.button:backdrop:hover .app-notification .titlebar .titlebutton.button, .titlebar .app-notification .titlebutton.button, .app-notification GtkCalendar.header .titlebutton.button, -GtkCalendar.header .app-notification .titlebutton.button, .app-notification .button.flat:backdrop, .app-notification .button.flat:insensitive, .app-notification .button.flat:backdrop:insensitive, .app-notification .header-bar .titlebutton.button:backdrop:insensitive, .header-bar .app-notification .titlebutton.button:backdrop:insensitive, +GtkCalendar.header .app-notification .titlebutton.button, +.app-notification.frame .button.flat, +.app-notification.frame .header-bar .button.titlebutton, +.header-bar .app-notification.frame .button.titlebutton, +.app-notification.frame .titlebar .button.titlebutton, +.titlebar .app-notification.frame .button.titlebutton, +.app-notification.frame GtkCalendar.header .button.titlebutton, +GtkCalendar.header .app-notification.frame .button.titlebutton, .app-notification .button.flat:backdrop, .app-notification .header-bar .titlebutton.button:backdrop, .header-bar .app-notification .titlebutton.button:backdrop, +.app-notification .titlebar .titlebutton.button:backdrop, +.titlebar .app-notification .titlebutton.button:backdrop, +.app-notification GtkCalendar.header .titlebutton.button:backdrop, +GtkCalendar.header .app-notification .titlebutton.button:backdrop, .app-notification .button.flat:insensitive, .app-notification .header-bar .titlebutton.button:insensitive, .header-bar .app-notification .titlebutton.button:insensitive, +.app-notification .titlebar .titlebutton.button:insensitive, +.titlebar .app-notification .titlebutton.button:insensitive, +.app-notification GtkCalendar.header .titlebutton.button:insensitive, +GtkCalendar.header .app-notification .titlebutton.button:insensitive, .app-notification .button.flat:backdrop:insensitive, .app-notification .header-bar .titlebutton.button:backdrop:insensitive, .header-bar .app-notification .titlebutton.button:backdrop:insensitive, .app-notification .titlebar .titlebutton.button:backdrop:insensitive, .titlebar .app-notification .titlebutton.button:backdrop:insensitive, .app-notification GtkCalendar.header .titlebutton.button:backdrop:insensitive, -GtkCalendar.header .app-notification .titlebutton.button:backdrop:insensitive, GtkCalendar.button, .header-bar GtkCalendar.button.titlebutton, +GtkCalendar.header .app-notification .titlebutton.button:backdrop:insensitive, +.app-notification.frame .button.flat:backdrop, +.app-notification.frame .header-bar .button.titlebutton:backdrop, +.header-bar .app-notification.frame .button.titlebutton:backdrop, +.app-notification.frame .titlebar .button.titlebutton:backdrop, +.titlebar .app-notification.frame .button.titlebutton:backdrop, +.app-notification.frame GtkCalendar.header .button.titlebutton:backdrop, +GtkCalendar.header .app-notification.frame .button.titlebutton:backdrop, +.app-notification.frame .button.flat:insensitive, +.app-notification.frame .header-bar .button.titlebutton:insensitive, +.header-bar .app-notification.frame .button.titlebutton:insensitive, +.app-notification.frame .titlebar .button.titlebutton:insensitive, +.titlebar .app-notification.frame .button.titlebutton:insensitive, +.app-notification.frame GtkCalendar.header .button.titlebutton:insensitive, +GtkCalendar.header .app-notification.frame .button.titlebutton:insensitive, +.app-notification.frame .button.flat:backdrop:insensitive, +.app-notification.frame .header-bar .button.titlebutton:backdrop:insensitive, +.header-bar .app-notification.frame .button.titlebutton:backdrop:insensitive, +.app-notification.frame .titlebar .button.titlebutton:backdrop:insensitive, +.titlebar .app-notification.frame .button.titlebutton:backdrop:insensitive, +.app-notification.frame GtkCalendar.header .button.titlebutton:backdrop:insensitive, +GtkCalendar.header .app-notification.frame .button.titlebutton:backdrop:insensitive, GtkCalendar.button, .header-bar GtkCalendar.button.titlebutton, .titlebar GtkCalendar.button.titlebutton, -GtkCalendar.header GtkCalendar.button.titlebutton, GtkCalendar.button:hover, .scale-popup .button:hover, .scale-popup .button:backdrop, .scale-popup .button:backdrop:hover, .scale-popup .button:backdrop:insensitive { +GtkCalendar.header GtkCalendar.button.titlebutton, GtkCalendar.button:hover, .header-bar GtkCalendar.button.titlebutton:hover, +.titlebar GtkCalendar.button.titlebutton:hover, +GtkCalendar.header GtkCalendar.button.titlebutton:hover, .scale-popup .button:hover, .scale-popup .button:backdrop, .scale-popup .button:backdrop:hover, .scale-popup .button:backdrop:insensitive { border-color: transparent; background-color: transparent; background-image: none; @@ -3384,22 +3425,25 @@ GtkCalendar.header .list-row.button.titlebutton { /********************* * App Notifications * *********************/ -.app-notification { +.app-notification, +.app-notification.frame { + padding: 10px; border-width: 0 1px 1px; border-style: solid; border-color: rgba(255, 255, 255, 0.1); border-radius: 0 0 6px 6px; background-color: rgba(46, 52, 54, 0.7); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); - background-clip: padding-box; - padding: 0 4px; } - .app-notification:backdrop { + background-clip: padding-box; } + .app-notification:backdrop, + .app-notification.frame:backdrop { background-image: none; } .app-notification .button, .app-notification .header-bar .button.titlebutton, .header-bar .app-notification .button.titlebutton, .app-notification .titlebar .button.titlebutton, .titlebar .app-notification .button.titlebutton, .app-notification GtkCalendar.header .button.titlebutton, - GtkCalendar.header .app-notification .button.titlebutton { + GtkCalendar.header .app-notification .button.titlebutton, + .app-notification.frame .button { border: 1px solid; color: #eeeeec; outline-color: rgba(238, 238, 236, 0.2); @@ -3416,31 +3460,46 @@ GtkCalendar.header .list-row.button.titlebutton { .app-notification .titlebar .titlebutton.button, .titlebar .app-notification .titlebutton.button, .app-notification GtkCalendar.header .titlebutton.button, - GtkCalendar.header .app-notification .titlebutton.button { + GtkCalendar.header .app-notification .titlebutton.button, + .app-notification.frame .button.flat, + .app-notification.frame .header-bar .titlebutton.button, + .header-bar .app-notification.frame .titlebutton.button, + .app-notification.frame .titlebar .titlebutton.button, + .titlebar .app-notification.frame .titlebutton.button, + .app-notification.frame GtkCalendar.header .titlebutton.button, + GtkCalendar.header .app-notification.frame .titlebutton.button { icon-shadow: 0 1px black; text-shadow: 0 1px black; } - .app-notification .button:hover { + .app-notification .button:hover, + .app-notification.frame .button:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7)); box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; icon-shadow: 0 1px black; } - .app-notification .button:active, .app-notification .button:checked, .app-notification .button:backdrop:active, .app-notification .button:backdrop:checked { + .app-notification .button:active, .app-notification .button:checked, .app-notification .button:backdrop:active, .app-notification .button:backdrop:checked, + .app-notification.frame .button:active, + .app-notification.frame .button:checked, + .app-notification.frame .button:backdrop:active, + .app-notification.frame .button:backdrop:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7)); box-shadow: none; text-shadow: none; icon-shadow: none; } - .app-notification .button:insensitive, .app-notification .button:backdrop:insensitive { + .app-notification .button:insensitive, .app-notification .button:backdrop:insensitive, + .app-notification.frame .button:insensitive, + .app-notification.frame .button:backdrop:insensitive { color: #939695; border-color: rgba(0, 0, 0, 0.7); background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7)); box-shadow: none; text-shadow: none; icon-shadow: none; } - .app-notification .button:backdrop { + .app-notification .button:backdrop, + .app-notification.frame .button:backdrop { color: #eeeeec; background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); background-clip: padding-box; diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index 4324c5f28c..909cb4fa99 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -123,7 +123,8 @@ GtkFlowBox .grid-child { GtkFlowBox .grid-child:selected { outline-offset: -2px; } -.app-notification, .osd { +.app-notification, +.app-notification.frame, .osd { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); text-shadow: 0 1px black; @@ -989,7 +990,9 @@ GtkCalendar.header .inline-toolbar GtkToolButton:backdrop:only-child > .button.t .menuitem.button.flat, .header-bar .menuitem.titlebutton.button, .titlebar .menuitem.titlebutton.button, -GtkCalendar.header .menuitem.titlebutton.button, .menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, .header-bar .menuitem.titlebutton.button:backdrop:hover, +GtkCalendar.header .menuitem.titlebutton.button, .menuitem.button.flat:backdrop, .header-bar .menuitem.titlebutton.button:backdrop, +.titlebar .menuitem.titlebutton.button:backdrop, +GtkCalendar.header .menuitem.titlebutton.button:backdrop, .menuitem.button.flat:backdrop:hover, .header-bar .menuitem.titlebutton.button:backdrop:hover, .titlebar .menuitem.titlebutton.button:backdrop:hover, GtkCalendar.header .menuitem.titlebutton.button:backdrop:hover, .button:link, .header-bar .button.titlebutton:link, .titlebar .button.titlebutton:link, @@ -1005,13 +1008,51 @@ GtkCalendar.header .list-row.button.titlebutton, .list-row.button:backdrop:hover .app-notification .titlebar .titlebutton.button, .titlebar .app-notification .titlebutton.button, .app-notification GtkCalendar.header .titlebutton.button, -GtkCalendar.header .app-notification .titlebutton.button, .app-notification .button.flat:backdrop, .app-notification .button.flat:insensitive, .app-notification .button.flat:backdrop:insensitive, .app-notification .header-bar .titlebutton.button:backdrop:insensitive, .header-bar .app-notification .titlebutton.button:backdrop:insensitive, +GtkCalendar.header .app-notification .titlebutton.button, +.app-notification.frame .button.flat, +.app-notification.frame .header-bar .button.titlebutton, +.header-bar .app-notification.frame .button.titlebutton, +.app-notification.frame .titlebar .button.titlebutton, +.titlebar .app-notification.frame .button.titlebutton, +.app-notification.frame GtkCalendar.header .button.titlebutton, +GtkCalendar.header .app-notification.frame .button.titlebutton, .app-notification .button.flat:backdrop, .app-notification .header-bar .titlebutton.button:backdrop, .header-bar .app-notification .titlebutton.button:backdrop, +.app-notification .titlebar .titlebutton.button:backdrop, +.titlebar .app-notification .titlebutton.button:backdrop, +.app-notification GtkCalendar.header .titlebutton.button:backdrop, +GtkCalendar.header .app-notification .titlebutton.button:backdrop, .app-notification .button.flat:insensitive, .app-notification .header-bar .titlebutton.button:insensitive, .header-bar .app-notification .titlebutton.button:insensitive, +.app-notification .titlebar .titlebutton.button:insensitive, +.titlebar .app-notification .titlebutton.button:insensitive, +.app-notification GtkCalendar.header .titlebutton.button:insensitive, +GtkCalendar.header .app-notification .titlebutton.button:insensitive, .app-notification .button.flat:backdrop:insensitive, .app-notification .header-bar .titlebutton.button:backdrop:insensitive, .header-bar .app-notification .titlebutton.button:backdrop:insensitive, .app-notification .titlebar .titlebutton.button:backdrop:insensitive, .titlebar .app-notification .titlebutton.button:backdrop:insensitive, .app-notification GtkCalendar.header .titlebutton.button:backdrop:insensitive, -GtkCalendar.header .app-notification .titlebutton.button:backdrop:insensitive, GtkCalendar.button, .header-bar GtkCalendar.button.titlebutton, +GtkCalendar.header .app-notification .titlebutton.button:backdrop:insensitive, +.app-notification.frame .button.flat:backdrop, +.app-notification.frame .header-bar .button.titlebutton:backdrop, +.header-bar .app-notification.frame .button.titlebutton:backdrop, +.app-notification.frame .titlebar .button.titlebutton:backdrop, +.titlebar .app-notification.frame .button.titlebutton:backdrop, +.app-notification.frame GtkCalendar.header .button.titlebutton:backdrop, +GtkCalendar.header .app-notification.frame .button.titlebutton:backdrop, +.app-notification.frame .button.flat:insensitive, +.app-notification.frame .header-bar .button.titlebutton:insensitive, +.header-bar .app-notification.frame .button.titlebutton:insensitive, +.app-notification.frame .titlebar .button.titlebutton:insensitive, +.titlebar .app-notification.frame .button.titlebutton:insensitive, +.app-notification.frame GtkCalendar.header .button.titlebutton:insensitive, +GtkCalendar.header .app-notification.frame .button.titlebutton:insensitive, +.app-notification.frame .button.flat:backdrop:insensitive, +.app-notification.frame .header-bar .button.titlebutton:backdrop:insensitive, +.header-bar .app-notification.frame .button.titlebutton:backdrop:insensitive, +.app-notification.frame .titlebar .button.titlebutton:backdrop:insensitive, +.titlebar .app-notification.frame .button.titlebutton:backdrop:insensitive, +.app-notification.frame GtkCalendar.header .button.titlebutton:backdrop:insensitive, +GtkCalendar.header .app-notification.frame .button.titlebutton:backdrop:insensitive, GtkCalendar.button, .header-bar GtkCalendar.button.titlebutton, .titlebar GtkCalendar.button.titlebutton, -GtkCalendar.header GtkCalendar.button.titlebutton, GtkCalendar.button:hover, .scale-popup .button:hover, .scale-popup .button:backdrop, .scale-popup .button:backdrop:hover, .scale-popup .button:backdrop:insensitive { +GtkCalendar.header GtkCalendar.button.titlebutton, GtkCalendar.button:hover, .header-bar GtkCalendar.button.titlebutton:hover, +.titlebar GtkCalendar.button.titlebutton:hover, +GtkCalendar.header GtkCalendar.button.titlebutton:hover, .scale-popup .button:hover, .scale-popup .button:backdrop, .scale-popup .button:backdrop:hover, .scale-popup .button:backdrop:insensitive { border-color: transparent; background-color: transparent; background-image: none; @@ -3531,22 +3572,25 @@ GtkCalendar.header .list-row.button.titlebutton { /********************* * App Notifications * *********************/ -.app-notification { +.app-notification, +.app-notification.frame { + padding: 10px; border-width: 0 1px 1px; border-style: solid; border-color: rgba(255, 255, 255, 0.1); border-radius: 0 0 6px 6px; background-color: rgba(46, 52, 54, 0.7); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); - background-clip: padding-box; - padding: 0 4px; } - .app-notification:backdrop { + background-clip: padding-box; } + .app-notification:backdrop, + .app-notification.frame:backdrop { background-image: none; } .app-notification .button, .app-notification .header-bar .button.titlebutton, .header-bar .app-notification .button.titlebutton, .app-notification .titlebar .button.titlebutton, .titlebar .app-notification .button.titlebutton, .app-notification GtkCalendar.header .button.titlebutton, - GtkCalendar.header .app-notification .button.titlebutton { + GtkCalendar.header .app-notification .button.titlebutton, + .app-notification.frame .button { border: 1px solid; color: #eeeeec; outline-color: rgba(238, 238, 236, 0.2); @@ -3563,31 +3607,46 @@ GtkCalendar.header .list-row.button.titlebutton { .app-notification .titlebar .titlebutton.button, .titlebar .app-notification .titlebutton.button, .app-notification GtkCalendar.header .titlebutton.button, - GtkCalendar.header .app-notification .titlebutton.button { + GtkCalendar.header .app-notification .titlebutton.button, + .app-notification.frame .button.flat, + .app-notification.frame .header-bar .titlebutton.button, + .header-bar .app-notification.frame .titlebutton.button, + .app-notification.frame .titlebar .titlebutton.button, + .titlebar .app-notification.frame .titlebutton.button, + .app-notification.frame GtkCalendar.header .titlebutton.button, + GtkCalendar.header .app-notification.frame .titlebutton.button { icon-shadow: 0 1px black; text-shadow: 0 1px black; } - .app-notification .button:hover { + .app-notification .button:hover, + .app-notification.frame .button:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7)); box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; icon-shadow: 0 1px black; } - .app-notification .button:active, .app-notification .button:checked, .app-notification .button:backdrop:active, .app-notification .button:backdrop:checked { + .app-notification .button:active, .app-notification .button:checked, .app-notification .button:backdrop:active, .app-notification .button:backdrop:checked, + .app-notification.frame .button:active, + .app-notification.frame .button:checked, + .app-notification.frame .button:backdrop:active, + .app-notification.frame .button:backdrop:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7)); box-shadow: none; text-shadow: none; icon-shadow: none; } - .app-notification .button:insensitive, .app-notification .button:backdrop:insensitive { + .app-notification .button:insensitive, .app-notification .button:backdrop:insensitive, + .app-notification.frame .button:insensitive, + .app-notification.frame .button:backdrop:insensitive { color: #8d9091; border-color: rgba(0, 0, 0, 0.7); background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7)); box-shadow: none; text-shadow: none; icon-shadow: none; } - .app-notification .button:backdrop { + .app-notification .button:backdrop, + .app-notification.frame .button:backdrop { color: #eeeeec; background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7)); background-clip: padding-box; -- 2.30.2